<%include ../includes/header.html %>
<style type="text/css">
    div#canvas-frame {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 600px;
        background-color: #EEEEEE;
        position: relative;
    }

</style>
    <section class="content-header">
      <h1>
        初级教程
        <small>第7章 3D模型的加载与使用</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Junior</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div id="canvas-frame"></div>
    </section>
    <!-- /.content -->
<%include ../includes/footer.html %>
<script src="/bower_components/three/examples/js/controls/TrackballControls.js"></script>
<script src="/bower_components/three/examples/js/loaders/VTKLoader.js"></script>
<script>
  $(function(){
 
    var container, stats;
    var camera, controls, scene, renderer;
    var cross;
    init();
    animate();

    function init() {
        var canvasWidth = document.getElementById('canvas-frame').clientWidth;
        var canvasHeight = document.getElementById('canvas-frame').clientHeight;
        camera = new THREE.PerspectiveCamera( 60, canvasWidth / canvasHeight, 0.01, 1e10 );
        camera.position.z = 0.2;
        //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
        controls = new THREE.TrackballControls( camera );
        //旋转速度
        controls.rotateSpeed = 5.0;
        //变焦速度
        controls.zoomSpeed = 5;
        //平移速度
        controls.panSpeed = 2;
        //是否不变焦
        controls.noZoom = false;
        //是否不平移
        controls.noPan = false;
        //是否开启移动惯性
        controls.staticMoving = true;
        //动态阻尼系数 就是灵敏度 
        controls.dynamicDampingFactor = 0.3;

        scene = new THREE.Scene();
        scene.add( camera );

        // light
        // var dirLight = new THREE.DirectionalLight( 0xffffff );
        // dirLight.position.set( 200, 200, 1000 ).normalize();

        // 环境光
        var light = new THREE.AmbientLight(0xFFFFFF);
        light.position.set(200, 200, 1000);
        scene.add(light)

        // camera.add( dirLight );
        // camera.add( dirLight.target );
        // A begin
        var material = new THREE.MeshLambertMaterial( { color:0xffffff, side: THREE.DoubleSide } );
        var loader = new THREE.VTKLoader();
        loader.load( "/juniors/models/vtk/bunny.vtk", function ( text ) {
            var geometry = text;
            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.setY( - 0.09 );
            scene.add( mesh );
        } );
        // A end
        // renderer
        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setSize( canvasWidth, canvasHeight );
        renderer.setClearColor(0xCCCCCC, 1.0);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        document.getElementById('canvas-frame').appendChild( stats.domElement );
    }

    function animate() {
        requestAnimationFrame( animate );
        controls.update();
        renderer.render( scene, camera );
        stats.update();
    }
  })
</script>
